<template>
    <view>
        <myNavigation ref="navBar"></myNavigation>
        <view class="container">
            <view class="food_input">
                <input type="text" placeholder="点击添加自定义食材" v-model="curInput" @input="addInput">
                <view class="add_btn" @tap.stop="inputAddSubmit" :class="{hide: curInput === '' }">添加</view>
            </view>
            <view class="food_selected">
                <view class="title">
                    <view class="title_l">已选食材</view>
                    <view class="title_r" @tap.stop="clearAllIngredient">清空</view>
                </view>
                <view class="food_tip" v-if="selectList.length===0">
                    <view class="title">看起来你还没添加任何食材</view>
                    <view class="tip">
                        你可以通过上方的<text style="color: red;">输入框</text>
                        自定义输入食材或者通过下方的<text style="color: red;">流行食材</text>
                        点击添加
                    </view>
                </view>
                <view class="food_ingredients_list" v-if="selectList.length!==0">
                    <block v-for="(item,index) in selectList" :key="index">
                        <view class="food_ingredients_item ">
                            <view>{{item}}</view>
                            <view class="food_ingredients_icon iconfont" @tap.stop="removeItem(item)">&#xe753;</view>
                        </view>

                    </block>
                </view>
            </view>
            <view class="select_btn">
                匹配菜谱
            </view>
            <view class="ingredientes_hots">
                <view class="title">流行食材</view>
                <block v-for="(item,index) in ingredient_hots" :key="index">
                    <view class="hots_item" v-if="item.ingredient.length!==0">
                        <view class="hots_item_title">{{item.title}}</view>
                        <view class="hots_item_list">
                            <block v-for="(ingredient, index1 ) in item.ingredient" :key="index1">
                                <view class="food_name_item" @tap.stop="addInList(item,ingredient)">{{ingredient}}
                                </view>
                            </block>
                        </view>
                    </view>
                </block>
            </view>
        </view>
    </view>
</template>


<script setup>
    import { ref, onMounted, inject, reactive } from 'vue';
    import { AtLoadMore, AtFloatLayout, AtButton } from 'taro-ui-vue3'
    import Taro from "@tarojs/taro";
    import "./select.scss"
    import myNavigation from '../../components/myNavigation.vue';

    // 注入配置
    const config = inject('config');
    const baseUrl = config.baseUrl; // 从全局配置中读取 baseUrl



    // 导航栏信息
    const navBar = ref(null);

    const navigationHome = () => {
        Taro.switchTab({
            url: '../index/index',
        });
    };

    const setNavBar = () => {
        if (navBar.value) {
            navBar.value.navigationHome = navigationHome;
            navBar.value.navigationTitle = "选菜匹配";
        }
    }

    onMounted(() => {
        setNavBar();
    });


    // 定义一个响应式变量来控制弹窗的显示状态
    const isModalOpened = ref(false);

    // 打开弹窗的方法
    const showModal = () => {
        isModalOpened.value = true;

    };
    const handleClose = () => {
        isModalOpened.value = false;
    };

    const curInput = ref("");
    // input输入时调用的函数
    const addInput = (e) => {
        curInput.value = e.detail.value;
    }

    const inputAddSubmit = () => {
        selectList.value.push(curInput.value);
        ingredient_hots.value[0].ingredient = filterArray(curTimeIngredient.value, selectList.value)
        curInput.value = '';
    }

    const selectList = ref([]);

    // 删除选择的食材
    const removeItem = (item) => {
        selectList.value = selectList.value.filter(i => i !== item);
        ingredient_hots.value[0].ingredient = filterArray(curTimeIngredient.value, selectList.value)

    }

    // 清空选择的食材
    const clearAllIngredient = () => {
        selectList.value = []
        ingredient_hots.value[0].ingredient = filterArray(curTimeIngredient.value, selectList.value)
    }


    // 函数：从array1中筛选出不在array2中的元素
    function filterArray(arr1, arr2) {
        return arr1.filter(element => !arr2.includes(element));
    }


    // 时令食材
    const curTimeIngredient = ref([])

    const ingredient_hots = ref([
        {
            title: '时令食材',
            ingredient: ["鸡", "萝卜", "牛排", "牛", "羊肉", "牛腩", "虾皮", "紫菜", "芋头", "五花肉", "香菇", "菠菜", "海带",]
        }
    ])

    // 加入食材
    const addInList = (item, ingredient) => {
        item.ingredient = item.ingredient.filter(item => item !== ingredient);
        selectList.value.push(ingredient)
    }

    onMounted(() => {
        curTimeIngredient.value = ingredient_hots.value[0].ingredient;
    })



</script>